<template>
	<view class="pads">
		<view class="in_top">
			<view class="ti_name">开票金额</view>
			<view>
				<view class="ti_r_item">
					<!-- <view class="item_n">商品费</view> -->
					<view class="item_n marL" style="font-weight: 700;">¥{{orderInfo.totalPrice}}</view>
					<!-- <view class="item_types marrx">商家开票</view> -->
				</view>
				<!-- <view class="ti_r_item marrt">
					<view class="item_n">配送费</view>
					<view class="item_n marL" style="font-weight: 700;">¥{{orderInfo.rfreight}}</view>
					<view class="item_types marrx">平台开票</view>
				</view> -->
			</view>
		</view>
		<view class="in_Body" :class="{show:showD}">
			<view class="solid-bottom flex align-center R-stores">
				<view class="R-stitel">抬头</view>
				<radio-group name="radio" @change="radioChange">
					<label>
						<radio value="0" :checked="form.rise=='0'" /><text style="margin-left: 20rpx;">单位</text>
					</label>
					<label style="margin-left: 70rpx;">
						<radio value="1" :checked="form.rise=='1'" /><text style="margin-left: 20rpx;">个人/非企业单位</text>
					</label>
				</radio-group>
			</view>
			<view v-if="form.rise=='0'">
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">公司抬头<text class="text-nred">*</text></view>
					<input type="text" v-model="form.company.inv_name" placeholder="请输入公司抬头" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">公司税号<text class="text-nred">*</text></view>
					<input type="text" v-model="form.company.inv_ti_number" placeholder="请输入公司税号" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">电子邮件<text class="text-nred">*</text></view>
					<input type="text" v-model="form.company.mail" placeholder="请输入电子邮件" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">公司地址</view>
					<input type="text" v-model="form.company.inv_address" placeholder="请输入公司地址" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">公司电话</view>
					<input type="text" v-model="form.company.inv_phone" placeholder="请输入公司电话" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">开户银行</view>
					<input type="text" v-model="form.company.inv_bank" placeholder="请输入开户银行" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">开户账号</view>
					<input type="text" v-model="form.company.inv_bank_number" placeholder="请输入开户账号" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
			</view>
			<view v-if="form.rise=='1'">
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">抬头名称 <text class="text-nred">*</text></view>
					<input type="text" v-model="form.owner.inv_name" placeholder="请输入抬头名称" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">电子邮件</view>
					<input type="text" v-model="form.owner.mail" placeholder="请输入电子邮件" placeholder-class="plhcs"
						class="flex-sub R-money" />
				</view>
			</view>
		</view>
		<view v-if="form.rise=='0'" class="showMore" @click="showD=!showD">
			<view class="">
				<text v-if="showD">收起选填信息</text>
				<text v-if="!showD&&form.rise=='0'">选填信息(地址、电话等)</text>
				<text v-if="!showD&&form.rise=='1'">选填信息</text>
			</view>
			<view class="">
				<text :class="showD?'cuIcon-fold':'cuIcon-unfold'"></text>
			</view>
		</view>
		<view class="full_btn  padding-top-lg padding-bottom-sm text-lg">
			<view class="mbtn" @click="submits">
				提交
			</view>
		</view>
		<uni-popup ref="isfavRef" zindex type="bottom" borderRadius="16px 16px 0 0">
			<view class="modelcon">
				<view class="tits_mo">确认开票信息</view>
				<view v-if="form.rise=='0'">
					<view class="mo_items">
						<view class="it_n">公司抬头</view>
						<view class="it_va">{{form.company.inv_name}}</view>
					</view>
					<view class="mo_items">
						<view class="it_n">公司税号</view>
						<view class="it_va">{{form.company.inv_ti_number}}</view>
					</view>
					<view class="mo_items">
						<view class="it_n">开票金额</view>
					<!-- 	<view class="it_va" style="font-weight: 700;"> ¥{{ (parseFloat(orderInfo.totalPrice) + parseFloat(orderInfo.rfreight)).toFixed(2) }}</view> -->
            <view class="it_va" style="font-weight: 700;"> ¥{{orderInfo.totalPrice}}</view>
					</view>
				</view>
				<view v-else>
					<view class="mo_items">
						<view class="it_n">抬头名称</view>
						<view class="it_va">{{form.owner.inv_name}}</view>
					</view>
					<view class="mo_items">
						<view class="it_n">开票金额</view>
						<!-- <view class="it_va" style="font-weight: 700;">¥{{(parseFloat(orderInfo.totalPrice) + parseFloat(orderInfo.rfreight)).toFixed(2)}}</view> -->
            <view class="it_va" style="font-weight: 700;">¥{{orderInfo.totalPrice}}</view>
					</view>
				</view>
				<view class="doSub" @click="sureSubmit">
					确认提交
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { mnavTo } from '@/utils/helper';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import mFormRule from "@/config/formRule";
	import mChecker from "@/utils/checker";
	import { showLoading, hideLoading } from '@/utils/helper';
	import mApi from "@/utils/mapi";
	import { saveInvoice } from '@/api/vmeitime-http/index.js'
	import { useShopStore } from '@/stores/shopStore';
	const shopStore = useShopStore();
	const showD = ref(false)
	const isfavRef = ref()
	const orderId=ref()
	const orderInfo=ref({
		orderId:'10202407111782383252746',//订单号
		totalPrice:"17.6",//商品费
		rfreight:"0"//运费
	})
	const form = ref<any>({
		rise: '0',   //'0':单位，'1':个人/非企业单位
		company: {
			sell_member_id:'',
			// member_id:'16681',
			inv_name: '',
			inv_ti_number: '',
			mail: '',
			inv_address: '',
			inv_phone: '',
			inv_bank: '',
			inv_bank_number: '',
			inv_type:'1135'
		},
		owner: {
			inv_name: '',
			mail: '',
			sell_member_id:'',
			// member_id:'16681',
			inv_type:'1134'
		}
	})
	onLoad((options)=>{
		orderInfo.value.orderId=options.vbill_id
		orderInfo.value.totalPrice=options.ntotal_money
		orderInfo.value.rfreight=options.vfreight_money
		form.value.company.sell_member_id=shopStore.curSellerMemberId
		form.value.owner.sell_member_id=shopStore.curSellerMemberId
	})
	const radioChange = (evn : any) => {
		form.value.rise = evn.detail.value
	}
	const submits =() => {
		let checkParam = false;
		if (form.value.rise == '0') {
			checkParam = mChecker.check(
				form.value.company,
				mFormRule.invoiceRuleComp
			);
		} else {
			checkParam = mChecker.check(
				form.value.owner,
				mFormRule.invoiceRuleOwn
			);
		}
		if (!checkParam) {
			mApi.msg(mChecker.error.msg);
			return;
		}
		isfavRef.value.open()
	}
	const sureSubmit=async()=>{
		// mnavTo('/pages/others/invoiCompleted/invoiCompleted')
		
		let res=null;
		if (form.value.rise == '0') {
			// form.value.company.inv_money=  parseFloat(orderInfo.value.totalPrice) + parseFloat(orderInfo.value.rfreight) 
      form.value.company.inv_money=orderInfo.value.totalPrice
			form.value.company.bill_id=orderInfo.value.orderId
					console.log("company",form.value.company)
			res=await saveInvoice(form.value.company)
		}else{
	  	// form.value.owner.inv_money=  parseFloat(orderInfo.value.totalPrice) + parseFloat(orderInfo.value.rfreight) 
      form.value.owner.inv_money=orderInfo.value.totalPrice
			form.value.owner.bill_id=orderInfo.value.orderId
			console.log("owner",form.value.owner)
			res=await saveInvoice(form.value.owner)
		}
		if(!res.result){
			mApi.msg(res.shortMessage)
			return
		}
    uni.redirectTo({
      url:'/pages/others/invoiCompleted/invoiCompleted'
    })
		// mnavTo('')
	}
	
</script>

<style lang="scss" scoped>
	.pads {
		padding: 20rpx;
		background-color: #F5F7F6;
		width: 100vw;
		height: 100vh;
	}

	.marL {
		margin-left: 30rpx;
	}

	.marr {
		margin-right: 30rpx;
	}

	.marrx {
		margin-left: 60rpx;
	}

	.marrt {
		margin-top: 30rpx;
	}

	.in_top {
		width: 100%;
		height: 96rpx;
		border-radius: 20rpx;
		background: #FFF;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx 10rpx 30rpx;

		.ti_name {
			color: #999;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;
		}

		.ti_r_item {
			display: flex;
			justify-content: space-between;

			.item_n {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				min-width: 100rpx;
			}

			.item_types {
				width: 146rpx;
				height: 52rpx;
				border-radius: 10rpx;
				background: #F5F5F5;
				text-align: center;
				line-height: 52rpx;
				margin-top: -10rpx;
			}
		}
	}

	.in_Body {
		width: 100%;
		max-height: 420rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFF;
		padding: 30rpx 30rpx 10rpx 30rpx;
		margin-top: 20rpx;
		overflow: hidden;

		&.show {
			max-height: fit-content;
		}
	}

	.R-stores {
		width: 100%;
		height: 98rpx;

		.R-stitel {
			min-width: 164rpx;
			color: #666;
			// margin-left: 35rpx;
			// font-size: 27rpx;
			// font-family: PingFang-SC-Regular;
			// font-weight: 400;
			// color: #333333;
		}

		// .R-stxt {
		// 	font-size: 30rpx;
		// 	font-family: PingFang-SC-Regular;
		// 	font-weight: 400;
		// 	color: #333333;
		// 	text-align: right;
		// 	padding-right: 31rpx;
		// }

		.R-balance {
			font-size: 30rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #dd3129;
			text-align: right;
			padding-right: 31rpx;
		}

		.R-money {
			font-size: 27rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			margin-right: 31rpx;
		}
	}

	.showMore {
		width: 100%;
		height: 120rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		background: #FFF;
		padding: 20rpx 0rpx 0rpx 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modelcon {
		min-height: 400rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx 50rpx 20rpx 50rpx;

		.tits_mo {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 700;
		}

		.mo_items {
			display: flex;
			margin-top: 45rpx;

			.it_n {
				color: #999;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 400;
				min-width: 120rpx;
			}

			.it_va {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0.32px;
				margin-left: 25rpx;
			}
		}

		.doSub {
			width: 654rpx;
			height: 102rpx;
			border-radius: 20rpx;
			background: #53A87F;
			color: #FFF;
			text-align: center;
			font-family: ABeeZee;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 102rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
	}
</style>